/*
 * @Description: 员工卡充值页面
 * @Author: ziwei.ma
 * @Date: 2019-05-06 15:44:23
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-06 15:49:53
 */
<template>
  <div id="app">
    <div class="page">
      <!-- <top-banner></top-banner> -->
      <div class="banner-warpper">
        <banner
          width="10rem"
          height="4.266667rem"
          :bannerEnName="bannerName"
        ></banner>
      </div>
      <div class="tips fontsize26">请选择充值金额</div>
      <recharge-amount
        cardType="StaffCard"
        @setSkuObj="getSKU"
      ></recharge-amount>
      <payment-method
        cardType="StaffCard"
        @setPayments="getPaymentMethod"
      ></payment-method>
    </div>
    <div
      class="pay-btn fontsize28"
      @click="comfirmPay"
    >确认支付</div>
  </div>
</template>

<script>
import { Banner } from 'vue-xb-ui-depot'
import RechargeMethod from '../components/RechargeMethod'
import PaymentMethodVue from '../components/PaymentMethod.vue'
import RechargeAmountVue from '../components/RechargeAmount.vue'
import RechargeMixinVue from './RechargeMixin.vue'
import { STAFF_CARD_INSTANCE } from '@/constants/CardInstance'
export default {
  name: 'App',
  mixins: [RechargeMixinVue],
  components: {
    'recharge-method': RechargeMethod,
    'payment-method': PaymentMethodVue,
    'recharge-amount': RechargeAmountVue,
    'banner': Banner
  },
  data() {
    return {
      bannerName: window.APP_VIRTUAL_STAFF_RECHARGE,
      // skuid: '', // SKUid获取
      // salePrice: '', // 支付金额
      cardType: STAFF_CARD_INSTANCE
      // isPhoneNoRecharge: false,
      // isClicked: false, // 支付按钮是否被点击,false表示可点击
      // isPayment: true // 是否获取到支付方式
    }
  },
  methods: {
    getSKU(skuid, salePrice) {
      this.skuid = skuid
      console.log('商品SKUid：' + this.skuid)
      this.salePrice = salePrice
    }
  },
  mounted() {
    window.onResume = () => {
      this.isClicked = false
    }
    this.$UI.then(UI => {
      UI.setTitle('员工卡余额充值', () => { }, () => { })
    })
  }

}
</script>

<style scoped>
#app {
  height: 100%;
  background-color: #eeeeee;
}
.page {
  height: calc(100% - 98px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tips {
  height: 80px;
  line-height: 80px;
  color: #999999;
  background-color: #ffffff;
  padding-left: 30px;
  margin-top: 16px;
}
/* 广告位 */
.banner-warpper {
  width: 750px;
  height: 320px;
}
.pay-btn {
  display: inline-block;
  width: 750px;
  height: 98px;
  line-height: 98px;
  background-color: #19b2de;
  color: #ffffff;
  text-align: center;
}
</style>
